<template>
  <div class=" white-module">
    <div class="title">
      <div class="left">
        通知列表
      </div>
      <div class="right">
        <el-button type="primary" @click="readAll">全部已读</el-button>
      </div>
    </div>

    <div class="global-table">
      <el-table
          :data="dataList"
          :header-cell-style="{
            background: '#F5F7FA',
            color: '#333',
          }"
          style="width: 100%"
      >
        <el-table-column prop="matchName" label="赛事名称" />
        <el-table-column prop="title" label="通知标题">
          <template #default="scope">
            <!--增加红色小圆点未读标识-->
            {{scope.row.title}}
            <span class="unread-dot" v-if="!scope.row.user_id"></span>
          </template>
        </el-table-column>
        <el-table-column prop="create_date" label="发布时间" />

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <span  class="table-text-btn"  @click="viewDetail(scope.row.id)"> 查看 </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row class="global-pagination">
      <el-col :span="8" class="total"> 共搜索 {{total}} 条数据 </el-col>
      <el-col :span="16">
        <el-pagination
            background
            layout="  prev, pager, next, jumper"
            :total="total"
            :page-size="10"
            :current-page="page"
            :small="false"
            :disabled="false"
            @size-change="query"
            @current-change="pageCurrentChangeHandle"
        />
      </el-col>
    </el-row>



  </div>
  <el-dialog
      v-model="dialogVisible" :show-close="false"
      width="400px"
  >
    <div class="confirm-dialog">
      <div class="image"><img src="@/assets/common/notice.png"/></div>
      <div class="text" v-html="dataForm.content"></div>
      <div class="btns">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script lang="ts" >
import {ref,toRefs, reactive, defineComponent} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache} from "@/utils/cache";



export default defineComponent({
  setup() {
    const state = reactive({
      getDataListURL: "/front/notice/page?pageSize=10&type=1",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        id: null,
        status: "",
        name: "",
        title: "",
        content: "",
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {
      isCollapse:1,
      dialogVisible:false,
      isNavCollapse:false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
      userInfo: ""
    };
  },

  mounted() {
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
  },

  methods: {
    viewDetail(id:any){
      router.push({ path: "/notice/detail", query: { id: id } });
    },
    handleEnrollList(){
      router.push("/enroll/enrollList");
    },
    handleCollapse(){
      if (this.isCollapse == 1) {
        this.isCollapse= 2;
        this.isNavCollapse = false;
      } else {
        this.isCollapse = 1;
        setTimeout(() => {
          this.isNavCollapse = true;
        }, 130);
      }
    },



    /**
     * 解除绑定
     */
    handleDelete(id: any) {
      this.dialogVisible = true;
      this.dataForm.id = id;
    },

    /**
     * 确定解除绑定
     */
    handleConfirm() {
      baseService
          .post("/front/spteamuser/delete", {id: this.dataForm.id})
          .then((res) => {
                if (res.code === 0) {
                  this.query();
                  ElMessage.success('解除绑定成功');
                }else{
                  ElMessage.error(res.msg);
                }
                this.dialogVisible = false;
              }
          );
    },
    toDetail(id:any){
      router.push({ path: "/info", query: { id: id } });
    },

    /**
     * 全部已读
     */
    readAll() {
      baseService.get("/front/notice/readAll").then((res) => {
        if (res.code === 0) {
          this.query();
          ElMessage.success('全部已读');
        } else {
          ElMessage.error(res.msg);
        }
      });
    }


  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.white-module {
  padding-top: 20px;
}

.troops {
  position: relative;
  margin: 0px 0px 10px 20px;

  img {
    width: 579px;
  }

  .c {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 532px;
    line-height: 54px;
    border-radius: 6px;

    span {
      font-size: 16px;
      font-weight: $font-weight-bold;
      margin-left: 24px;
      margin-right: 11px
    }

  ;

    span:nth-child(3) {
      margin-left: 40px;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  margin-top: 17px;

  .left {
    font-size: 16px;
    font-weight: $font-weight-bold;
  }

;

  .right {
    color: #959CA9;

    .el-button {
      margin-left: 16px;
    }

    span {
      color: #FF8F3C;
    }
  }
}

.global-table {
  margin-top: 15px;
  padding: 0px 20px;
  .unread-dot {
    display: inline-block; /* 将 span 元素设置为块级元素 */
    width: 8px; /* 确定红点大小 */
    height: 8px;
    background-color: red; /* 设置背景颜色 */
    border-radius: 50%; /* 将红点设置为圆形 */
    margin-left: -3px; /* 如果和文字在一行上，需要设置左侧间距 */
    margin-top: -15px;
    vertical-align: middle; /* 设置垂直对齐方式为中间对齐 */
  }
}

.popper-menu {
  border: 0px !important;

  .el-menu {
    padding: 0px !important;
    background-color: #008fd1 !important;

    .el-menu-item-group__title {
      padding: 0px;
    }

    .el-menu-item:hover {
      background-color: #ffffff !important;
      color: #00a0e9;
    }

    .el-menu-item.is-active {
      background-color: #ffffff !important;
    }
  }
}</style>
